<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>分类</template>
            <template v-slot:right></template>
        </nav-bar>

        <div id="mainbox">

          <div class="toptab">
            <div class="ordertab">
              <van-tabs v-model:active="active2" @click="tabClick">
                <van-tab  title="销量"></van-tab>
                <van-tab title="价格"></van-tab>
                <van-tab title="评论"></van-tab>
              </van-tabs>
            </div>
            
          </div>

          <van-sidebar v-model="active" class="leftmenu">
            <van-collapse accordion>
              
                <van-sidebar-item v-for="(sub,index) in cate" :title="sub.name" :key="index" @click="onChangeTab"/>

            </van-collapse>
          </van-sidebar>
        

          <div class="goodslist">
            <div class="content">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        @offset="10"
                    >

                        <van-card
                        v-for="item in list" key="item.id"
                        @click="itemClick(item.id)"
                        :num="item.comments_count"
                        :price="item.price+'.00'"
                        :desc="item.updated_at"
                        :title="item.title"
                        :thumb="item.cover_url"
                        />
                                    
                    </van-list>
                </van-pull-refresh>
            </div>

          </div>

        </div>

    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { ref, onMounted, reactive,toRefs } from 'vue';
import {useRouter} from 'vue-router';
import { getGoryGoods} from 'network/goods';
import { Toast } from 'vant';

export default {
  name:"Cate",
    components:{
        NavBar
    },
    data() {
        return{
            cid:'0',
        }
    },
  setup() {
    const router = useRouter();
    const active = ref(0);
    const active2 = ref(0);
    let tabs = ref(null);
    const state = reactive({
            loading:false,
            finished:false,
            refreshing:false,
            list:[],
            cate:[],
            page:1,
            totalPage:0,
            category_id:0,
        });
    


    //当前的排序条件
    let currentOrder = ref('sales');
    //当前的分类ID
    let currentCid = ref('0');



    onMounted(()=>{
      onRefresh();  //初始化
    })
   
    //排序选项卡
    const tabClick =(index)=>{
    
      let orders =['sales','price','comments_count'];
      currentOrder.value = orders[index];
      state.page = 1;
      onRefresh();
   
      
    }


 


    //多次加载
        const loadDate = () =>{

Toast.loading({message:'加载中...',forbidClick:true});
          getGoryGoods(currentOrder.value,state.category_id,state.page).then(res=>{
console.log(state.category_id);                
              state.list = state.list.concat(res.goods.data);
              state.cate = res.categories;
              state.loading=false;
              state.totalPage = res.goods.next_page_url;
console.log(state.page,'########');
              if(res.goods.next_page_url == null) {  //如果数据下一页为空 就执行下面不要再加载了
                  state.finished = true;   //下拉加载再多 加上就是 加载完就不再滚动
              }
Toast.clear();
          })
        }

        const onLoad = () => {

            if(!state.refreshing && state.totalPage != null){     //如果数据下一页不为空，再执行下拉加1   !state.refreshing如果上拉加载更多是假取反
                state.page = state.page  + 1 ;
            }


            if(state.refreshing){
                state.list = [];
                state.refreshing = false;
            }
            loadDate();

        };

       

        const onRefresh = () => {
            //是否处于加载状态，加载过程中不触发load事件
            state.refreshing = true;
            // 清空列表数据
            state.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            state.loading = true;

            state.page = 1;
            onLoad();

        };



         //切换顶部tab
        const onChangeTab = (name) =>{
            console.log(name);
            state.page = 1;
            state.category_id = name;
            onRefresh();     //初始化加载
        }





    let itemClick=(id)=>{
      router.push({path:"/detail",query:{id}});
    }


    return { 
      active,
      active2,
      tabClick,
      onChangeTab,
      itemClick,
      currentOrder,
      currentCid,
      ...toRefs(state),
      onLoad,
      onRefresh,
      tabs
    };
  },
}
</script>

<style scoped lang="scss">
#mainbox{
  margin-top: 45px;
  display: flex;
  .toptab{
    flex:1;
    z-index: 9999 ;
    height: 50px;
    position: fixed;
    top:45px;
    right:0;
    left:130px;
  }
  .leftmenu{
    position: fixed;
    top:95px;
    left:0;
    width: 130px;
  }
  .goodslist{
    flex:1;
    position:absolute;
    top:95px;
    left:130px;
    right: 0;
    padding:10px;
    text-align: left;

  }
}
.van-image{
  width: 100% !important;
  height: 100% !important;
}
</style>



<style lang="scss">
.van-tabs__line {
  background-color: var(--color-tint) !important;
}
.van-tabs__wrap{
  position:sticky;
  top:45px !important;
  z-index: 999;
}

</style>